<template>
    <div class="charge-system">
        <div class="operation">
            <el-form
                :inline="true"
                :model="form"
                label-width="80px"
                class="formList"
            >
                <el-form-item label="选择区域">
                    <dx-cascader :area_id.sync="form.areaId" />
                </el-form-item>
                <el-form-item label="账期">
                    <el-date-picker
                        v-model="form.month"
                        value-format="yyyyMM"
                        type="month"
                        placeholder="选择日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item style="width: 45%">
                    <!-- <el-switch v-model="form.isAfterTax"> </el-switch> -->
                    <el-checkbox size="mini"  v-model="form.isHb">是否环比</el-checkbox>
                    <el-button
                        size="small"
                        type="primary"
                        style="margin-left: 12px"
                        @click="search()"
                        >查询</el-button
                    >
                    <el-button
                        size="small"
                        type="orange"
                        @click="exportExcel()"
                        >导出</el-button
                    >
                     <el-button
                        size="small"
                        type="orange"
                        @click="export_all(!0)"
                        >二级导出</el-button
                    >
                    <el-button
                        size="small"
                        type="orange"
                        @click="export_all(!1)"
                        >三级导出</el-button
                    >
                    
                </el-form-item>
            </el-form>
            <p class="g-unit">单位: 万元</p>
            <div class="tableBox">
                <el-table
                    border
                    stripe
                    v-loading="tableLoading"
                    :data="data"
                    style="width:100%"
                    class="tableTh28"
                    height="73vh"
                    ref="table"
                >
                    <el-table-column
                        prop="class1"
                        label="大类"
                        min-width="140"
                        fixed
                    ></el-table-column>
                    <el-table-column
                        prop="class2"
                        label="小类"
                        min-width="120"
                         show-overflow-tooltip
                        fixed
                    ></el-table-column>
                    <el-table-column
                        prop="indexname"
                        label="科目细化"
                        min-width="120"
                        show-overflow-tooltip
                        fixed
                    ></el-table-column>

                    <!-- <el-table-column
                        v-for="(it, i) in titles"
                        :key="i"
                        :prop="'indexValue' + i"
                        :label="+it.substr(6, 7) + '号'"
                        min-width="100"
                    ></el-table-column> -->

                     <el-table-column
                        v-for="(it, i) in titles"
                        :key="i"
                        :prop="it.value"
                        :label="it.label + '号 (' + it.week + ')'"
                         min-width="100"
                    >
                    </el-table-column>

                    <!-- <el-table-column fixed prop="total" label="月账" width="100px"></el-table-column> -->
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import { getCookie } from "@/common/js/cookie";
import { createSpanCharge, mergeSpan } from "@/utils/mixin";
import { getMonthDays, getWeek} from '@/utils/common'
import prefixAPI from "@/api/prefixAPI";
const exportUrl = prefixAPI.pack;

export default {
    name: "Bill-tab2",
    data() {
        return {
            titleName: [],
            tableLoading: false,
            form: {
                areaId: JSON.parse(getSessionStorage("accountInfo")).areaId,
                month: "",
                isAfterTax: true,
                isHb: !1,
            },
            tableData: [],
            colList: [],
            colnumName: [],
            titles: [],
            data: []
        };
    },
    mounted() {
        var that = this;
            
            that.getData();
    },
    methods: {
        init() {
            var that = this;

            that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            that.form.areaId = that.accountInfo.areaId;
            that.getData();
        },
        submitHandle() {
            let areaId = this.form.areaId;
            let accMonth = this.form.month;
            let isAfterTax = this.form.isAfterTax;
            this.tableLoading = true;
            $budgetAPI.dailyAccountGetList2(
                {
                    areaId,
                    accMonth,
                    isAfterTax
                },
                res => {
                    this.tableLoading = false;
                    if (res.code == 0) {
                        res.content.dataList.map((item, index) => {
                            for (let i = 0; i < 31; i++) {
                                item["data" + i] = item.data[2 * i];
                                item[i + "increase"] = item.data[2 * i + 1];
                            }
                        });
                        console.log(res);
                        this.colList = res.content.colList;
                        // let result = this.createTableData(res.content.dataList);
                        this.tableData = res.content.dataList;
                        console.log(this.tableData);
                        // this.spanArr = createSpanCharge(result,['incomeName','projectName','isProjectName','productName']);
                        this.spanArr = mergeSpan(this.tableData, [
                            "dataSource",
                            "class1",
                            "class2",
                            "indexName"
                        ]);
                        console.log(this.spanArr);
                        console.log("mergeSpan", temp);

                        setTimeout(() => {
                            this.$refs.table.doLayout();
                        }, 1200);
                    }
                },
                err => {
                    this.tableLoading = false;
                }
            );
        },
        // 生成tableData数据
        createTableData(dataArr) {
            let result = dataArr.map((item, index) => {
                return { ...item, ...item.data };
            });
            return result;
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (
                columnIndex == 0 ||
                columnIndex == 1 ||
                columnIndex == 2 ||
                columnIndex == 3
            ) {
                return this.spanArr[rowIndex][columnIndex];
            }
        },
        exportExcel() {
            var areaId = this.form.areaId,
                acctMonth = this.form.month.substr(0, 6),
                isHb = this.form.isHb,
                token = getCookie("token");

            window.open(`${exportUrl}/dailyAccount/exportSpecial?areaId=${areaId}&acctMonth=${acctMonth}&isHb=${isHb}&token=${token}`, "_self");
        },
        // getMonth() {
        //     return new Promise(resolve => {
        //         $budgetAPI.getMaxSpecialAcctMonth(
        //             {
        //                 areaId: this.form.areaId
        //             },
        //             res => {
        //                 if (res && res.code == 0) {
        //                     resolve(res.content);
        //                 }
        //             },
        //             err => {}
        //         );
        //     });
        // },
        search() {
            var that = this;

            that.getList();
        },
        async getData() {
          var that = this;
          // that.form.month = await that.getMonth();
          let nowYear = new Date().getFullYear();
          let nowMonth = new Date().getMonth() + 1;
          that.form.month = nowMonth > 9 ? nowYear + '' + nowMonth: nowYear + '0' + nowMonth
          that.getList();
        },
        getList() {
            var that = this,
                isHb = that.form.isHb,
                year = that.form.month.substr(0, 4),
                month = that.form.month.substr(4, 2),
                count = getMonthDays(year, month);

            that.tableLoading = true;

            that.titles = Array.from(new Array(count), (it, i) => {
                      var index = ((i+ 1) < 10 ? "0" + (i + 1) : i + 1)
                      return {
                            value:  isHb ? "hb_" + index  : "real_" + index ,
                            label: (i + 1) + '',
                            week: getWeek(year + '-' + month + '-' + index)
                      };
                  })
            $budgetAPI.getSpecialList(
                {
                    areaId: that.form.areaId,
                    isHb,
                    acctMonth: that.form.month.substr(0, 6)
                },
                res => {
                    if (res && res.code == 0) {
                        let content = res.content;

                        that.tableLoading = false;

                        if (content.length) {
                            // content.dataList.map((it, i) => {
                            //     it.dataList.map((item, index) => {
                            //         it["indexValue" + index] = item.indexValue;
                            //     });
                            // });
                            // that.spanArr = mergeSpan(content, [
                            //     "class1",
                            //     "class2",
                            //     "verticalIndexName"
                            // ]);
                            that.data = content;
                        } else {
                            that.data = [];
                        }
                         that.$nextTick(() => {
                            that.$refs.table.doLayout();
                        });
                    }
                },
                err => {
                    console.log(err);
                }
            );
        },
        export_all(type) {
            var areaId = this.form.areaId,
                acctMonth = this.form.month.substr(0, 6),
                isHb = this.form.isHb,
                token = getCookie("token");

            window.open(`${exportUrl}/dailyAccount/exportBatchSpecial?areaId=${areaId}&acctMonth=${acctMonth}&isHb=${isHb}&isSecond=${type}&token=${token}`, "_self");
        }
    }
};
</script>

<style lang="scss">
.charge-system {
    .daochu {
        .el-form-item__content {
            float: right;
            width: 100%;
            .el-button {
            }
        }
    }
}
</style>
